<script setup lang="ts">
import type {SlideButton} from "@/typex/modules/ui/tab-buttonx.ts";
import {useI18n} from "vue-i18n";

const {t, locale} = useI18n();
const ToHandle = (item: SlideButton) => {
    props.handel(item.path)
}
const props = defineProps({
    buttons: {
        type: Array<SlideButton> || [],
        required: true
    },
    handel: {
        type: Function,
        required: true
    }
})

</script>

<template lang="pug">
.tab_bar
    h6.bar_item(v-for="(item,index) in props.buttons" )
        span(@click="ToHandle(item)") {{ $t(item.name) }}
</template>

<style scoped lang="scss">
.tab_bar {
    display: flex;
    width: 100%;
}
.bar_item {
    text-align: center;
    width: 50px;
    max-width: 70px;
    padding: 5px;
    border: gray 2px solid;
}
</style>